import { Descriptions, Drawer, Tag } from 'antd'
import React, { useEffect } from 'react'

function Particulars(props: any) {
    const { visible, setVisible, detail } = props
    function getDisplayItem(data: any) {
        if (data === "" || typeof data === "undefined" || data === null)
            return "--"
        return data
    }
    useEffect(() => {

    }, [detail])
    return (
        <div>
            {detail === null || typeof detail === "undefined" ? null :
                <Drawer title="访客详情"
                    placement="right"
                    closable={false}
                    onClose={() => setVisible(false)}
                    visible={visible}
                    width={800}
                >
                    <Descriptions title="身份信息" bordered> 
                        <Descriptions.Item label="访客姓名">{getDisplayItem(detail.visitorName)}</Descriptions.Item>
                        <Descriptions.Item label="电话号码">{getDisplayItem(detail.visitorTel)}</Descriptions.Item><br/>
                        <Descriptions.Item label="身份证号">{getDisplayItem(detail.idCard)}</Descriptions.Item>
                        <Descriptions.Item label="防疫核验">{getDisplayItem(detail.healthCodeStatus) === 0?
                        <Tag color="#0ec671">正常</Tag>:
                        getDisplayItem(detail.healthCodeStatus) === 1?
                        <Tag color="#fad914">告警</Tag>:
                        getDisplayItem(detail.healthCodeStatus) === 2?
                        <Tag color="#da0909">危险</Tag>:
                        getDisplayItem(detail.healthCodeStatus) === 3?
                        <Tag color="#eee">未知</Tag>:
                        getDisplayItem(detail.healthCodeStatus) === 4?
                        <Tag color="#eee">数据异常</Tag>:
                        getDisplayItem(detail.healthCodeStatus) === 5?
                        <Tag color="#eee">验证失败</Tag>:<Tag color="#eee">异常人员：告警、危险</Tag>
                        }</Descriptions.Item>
                    </Descriptions>
                    <br />
                    <br />
                    <Descriptions title="到访信息" bordered>
                        <Descriptions.Item label="到访地址">{getDisplayItem(detail.visitAddressName)}</Descriptions.Item>
                        <Descriptions.Item label="到访目的">{getDisplayItem(detail.visitPurpose)}</Descriptions.Item><br/>
                        <Descriptions.Item label="到访时间">{getDisplayItem(detail.visitTime)}</Descriptions.Item>
                        <Descriptions.Item label="到访备注">{getDisplayItem(detail.remark)}</Descriptions.Item>
                    </Descriptions>
                    <br />
                    <br />
                    <Descriptions title="设备信息" bordered>
                        <Descriptions.Item label="设备编号">{getDisplayItem(detail.deviceCode)}</Descriptions.Item>
                        <Descriptions.Item label="设备地址">{getDisplayItem(detail.devLocation)}</Descriptions.Item>
                    </Descriptions>
                </Drawer>
            }
        </div>
    )
}

export default Particulars
